<template>
  <div class="product-div">


    <el-form ref="detailForm" label-width="100px">
      <div>
        <!-- <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i> -->
        <div class="big_title_style" style="font-size: 18px; ">
          <span>基础信息</span>
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <el-row>
              <el-form-item label="供应商编号">
                <span>{{ showData.supplierNo }}</span>
              </el-form-item>
        </el-row>
        <el-row>
              <el-form-item label="供应商名称">
                <span>{{ showData.supplierName }}</span>
              </el-form-item>
        </el-row>
        <el-row>
              <el-form-item label="品类">
                <span>{{ showData.mainCategory }}</span>
              </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="品牌">
              <span>{{ showData.supplierBrand }}</span>
            </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="LOGO">
            <el-image
              :src="showData.supplierLogUrl"
              style="width: 100px; height: 100px"
              :z-index="zIndex"
              :preview-src-list="[showData.supplierLogUrl]"
            ></el-image>
          </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="简介">
              <span>{{ showData.supplierRemark }}</span>
            </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="售后说明">
            <span>{{ showData.orderService }}</span>
          </el-form-item>
        </el-row>
      </div>

      <div>
        <div class="big_title_style" style="font-size: 18px; ">
          <span>联系方式</span>
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <el-row>
              <el-form-item label="联系人">
                <span>{{ showData.contactPerson }}</span>
              </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="手机号">
              <span>{{ showData.supplierPhone }}</span>
            </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="邮箱">
            <span>{{ showData.supplierEmail }}</span>
          </el-form-item>
        </el-row>
        <el-row>
              <el-form-item label="地址">
                <span>{{ regionName }}</span>
              </el-form-item>
            <el-form-item label="">
              <span>{{ showData.supplierAddress }}</span>
            </el-form-item>
        </el-row>
      </div>

      <div>
        <div class="big_title_style" style="font-size: 18px; ">
          <span>其他信息</span>
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <el-row>
            <el-form-item label="营业执照">
              <el-image
                v-for="(item, index) in licenseImgUrl"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item.url"
                :preview-src-list="[item.url]"
                :z-index="zIndex"
              >
              </el-image>
            </el-form-item>
        </el-row>
        <el-row>
          <!-- <el-col :span="24"> -->
            <el-form-item label="宣传图">
              <el-image
                v-for="(item, index) in bannerImage"
                :key="index"
                style="width: 100px; height: 100px"
                :src="item.url"
                :preview-src-list="[item.url]"
                :z-index="zIndex"
              >
              </el-image>
            </el-form-item>
        </el-row>

        <el-row>
              <el-form-item label="发布状态">
                <span>{{ showDataIsAuth }}</span>
              </el-form-item>
            <el-form-item label="发布人账号">
              <span>{{ showData.authUpdateUid }}</span>
            </el-form-item>
        </el-row>

        <el-row>
              <el-form-item label="更新时间">
                <span>{{ showData.updateTime }}</span>
              </el-form-item>
            <el-form-item label="更新人账号">
              <span>{{ showData.updateName }}</span>
            </el-form-item>
        </el-row>

        <el-row>
            <el-form-item label="创建时间">
              <span>{{ showData.createTime }}</span>
            </el-form-item>
              <el-form-item label="创建人账号">
                <span>{{ showData.createName }}</span>
              </el-form-item>
        </el-row>


      </div>
    </el-form>


    <div class="footer_btn">
            <el-button type="primary" size="mini" @click="handCloseDetail">返 回</el-button>
    </div>


  </div>
</template>

<script>
  import {
    getInfoByAccount,
    getInfo
  } from '@/api/supplier/info'
  import {getRegion} from '@/api/common/regin'
  import imageArray from '@/components/ImageUpload/imageArray'
  import imageList from '@/components/ImageUpload/imageList'
  import imageUpload from '@/components/ImageUpload'

  export default {
    name: 'Info',
    components: {
      imageList,
      imageUpload,
      imageArray
    },
    data() {
      return {
        //发布状态翻译
        showDataIsAuth: '',
        //查看详细省市区翻译
        regionName: '',
        //图片预览
        zIndex: 3000,
        //文本域自动调节
        autosize: true,
        //宣传图
        bannerImage: [],
        //营业执照
        licenseImgUrl: [],
        region: [],
        // 地区信息
        options: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 供应商资料表格数据
        infoList: [],
        // 弹出层标题
        title: '',
        //查看详细标题
        viewTitle: '',
        //选中数组的名字
        names: [],
        //是否显示查看详细弹出层
        viewOpen: false,
        //查看详细数据
        showData: [],
        // 状态字典
        dataStatusOptions: [],
        // 发布状态字典
        isAuthOptions: [],
        //供应商列表
        supplierUidOptions: [],

        // 表单参数
        form: {},

      }
    },
    created() {
      var supplierId = this.$route.params.supplierId;

      if (supplierId) {
        getInfo(supplierId).then((response) => {
          this.showData = response.data
          this.handleShowDetail(this.showData)
          //获取地区信息
          getRegion().then((response) => {
            this.options = response.data
          })
        })
      }
    },

    methods: {


      // 表单重置
      reset() {
        this.form = {
          supplierUid: null,
          platformUid: null,
          supplierNo: null,
          mainCategory: null,
          supplierBrand: null,
          supplierName: null,
          supplierLogUrl: null,
          servePhone: null,
          supplierRemark: null,
          supplierEmail: null,
          supplierPhone: null,
          supplierProvince: null,
          supplierCity: null,
          supplierArea: null,
          supplierAddress: null,
          contactPerson: null,
          contactPhone: null,
          dataStatus: null,
          isAuth: null,
          applyUser: null,
          applyTime: null,
          licenseImgUrl: null,
          authTime: null,
          authUpdateUid: null,
          createUser: null,
          updateUser: null,
          updateTime: null,
          createTime: null,
          storeLng: null,
          storeLat: null,
          bannerImage: null,
          juli: null,
          auditRemark: null,
          orderService: null,
          dataSort: null,
          region: null
        }
        this.resetForm('form')
      },

      /** 查看详情按钮操作 **/
      handleShowDetail(row) {
        getRegion().then((response) => {
          this.options = response.data
          var regionName = ''
          var region = this.options
          region.forEach(function (value, key, iterable) {
            if (value.value == row.supplierProvince) {
              regionName = value.label
              value.children.forEach(function (value, key, iterable) {
                if (value.value == row.supplierCity) {
                  regionName += value.label
                  value.children.forEach(function (value, key, iterable) {
                    if (value.value == row.supplierArea) {
                      regionName += value.label
                      return false
                    }
                  })
                  return false
                }
              })
              return false
            }
          })
          this.regionName = regionName
        })
        let this_ = this
        this.dataStatusOptions.forEach(function (value, key) {
          if (value.dictValue == row.isAuth) {
            this_.showDataIsAuth = value.dictLabel
            return false
          }
        })

        if (row.bannerImage != null) {
          this.bannerImage = row.bannerImage.split(',').map((item, index) => {
            return {url: item, name: index}
          })
        }

        if (row.licenseImgUrl != null) {
          this.licenseImgUrl = row.licenseImgUrl.split(',').map((item, index) => {
            return {url: item, name: index}
          })
        }
      },
      handCloseDetail() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/supplier/info",
        });
      },

      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      }
    }
  }
</script>

<style scoped>
  /* .MmsUiBlockTitle___line___27lhp1-44-1 {
    display: inline-block;
    background: #407cff;
    width: 2px;
    height: 16px;
    margin-right: 8px;
  }

  .MmsUiBlockTitle___title___2C-H-1-44-1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  } */

  .footer_btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-div {
    background-color: #fff;
    position: relative;
    padding: 20px;
    border: 1px solid #EEE;
    border-radius: 10px;
    width: 1000px;
    margin: 30px auto;
  }
</style>
